<template>
  <div>
    <Card>
      <Form ref="formInline" :model="formInline"  inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.id" placeholder="主播ID" />
        </FormItem>
        <FormItem prop="password">
            <DatePicker type="daterange" split-panels placeholder="交易时间" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem prop="password">
            <Select v-model="formInline.type" placeholder="交易类型">
                <Option value="beijing">类型1</Option>
                <Option value="shanghai">类型2</Option>
                <Option value="shenzhen">类型3</Option>
            </Select>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
        </FormItem>
    </Form>
      <tables ref="tables" editable :pageNum="pageNum" :listTotal="listTotal"   v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {title: 'ID', key: 'id'},
        {title: '昵称', key: 'nickname'},
        {title: '手机号', key: 'nickname'},
        {title: '交易类型', key: 'nickname'},
        {title: '交易状态', key: 'nickname'},
        {title: '金额', key: 'nickname'},
        {title: '创建时间', key: 'nickname'},
        {title: '更新时间', key: 'nickname'},
        {title: '备注', key: 'nickname'}
      ],
      tableData: [],
      pageNum: 1,
      listTotal: 5,
      formInline: {
        id: '',
        nickname: '',
        mobile: '',
        type: '',
        status: ''
      }
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    createAnchor () {
      this.$router.push('/anchor/create')
    }
  },
  mounted () {
    getTableData().then(res => {
      this.tableData = [{
        id: 1, avatar: '测试', nickname: '测试'
      }]// res.data
    })
  }
}
</script>

<style>

</style>
